<template>
    <el-dialog v-model="visible" title="图层管理器" width="56%" draggable>
        <label style="padding-right:0px;left:0px;width: 100%;color: red;">{{ curentLayerLabel }}</label>
        <el-header height="50px" style="display: flex;align-items: center;justify-content: center;width: 98%;">
            <el-button @click="onNewLayer">新建图层</el-button>
            <el-button @click="onSetCurent">设为当前</el-button>
            <el-button @click="onDelLayer">删除图层</el-button>
            <el-button @click="onSetAllDisplay">全部打开</el-button>
            <el-button @click="onSelAllGraphInLayer">选中该图层所有图形</el-button>
            <el-button @click="onSetLayerOrder('up')">上移</el-button>
            <el-button @click="onSetLayerOrder('down')">下移</el-button>
            <el-button @click="onSetLayerOrder('toTop')">置顶</el-button>
            <el-button @click="onSetLayerOrder('toBottom')">置底</el-button>
        </el-header>

        <el-table :data="layerData" highlight-current-row @current-change="handleCurrentChange" stripe style="width: 98%;text-align: center">
            <el-table-column prop="order" label="顺序" style="width: 10%;text-align: center" />
            <el-table-column prop="name" label="名称" style="width: 30%" >
                <template #default="scope">
                    <el-input v-model="layerData[scope.$index].name" size="large" @change="onCheckVisible(scope.$index, scope.row)" />
                </template>
            </el-table-column>>
            <el-table-column prop="display" label="开关" style="width: 10%">
                <template #default="scope">
                    <el-checkbox v-model="layerData[scope.$index].display" label="" size="large" @change="onCheckVisible(scope.$index, scope.row)" />
                </template>
            </el-table-column>
            <el-table-column prop="lock" label="冻结" style="width: 10%" >
                <template #default="scope">
                    <el-checkbox v-model="layerData[scope.$index].lock" label="" size="large" @change="onCheckLock(scope.$index, scope.row)" />
                </template>
            </el-table-column>>
            <el-table-column prop="color" label="颜色" style="width: 20%" >
                <template #default="scope">
                <el-color-picker  v-model="layerData[scope.$index].color" show-alpha :predefine="predefineColors" 
                @change="onSelColor(scope.$index, scope.row)" style="width:100px;">
                </el-color-picker>
            </template>
            </el-table-column>>
            <el-table-column prop="linewidth" label="线宽" style="width: 10%" />
            <el-table-column prop="linemode" label="线型" style="width: 10%" />
        </el-table>
        <template #footer>
            <span class="dialog-footer">
                <el-button class="button" @click="visible = false">关闭</el-button>
            </span>
        </template>
    </el-dialog>
</template>
    
<script  setup>
import { ref } from 'vue'
import globalConst from '../../script/canvas/common/globalConst'

var global = globalConst.GlobalConst;

const visible = ref(false)
const curentLayerLabel = ref("当前图层：0")
const curentLayer = ref("默认")
const currentRow = ref()
const visibleChecked = ref(true)
const predefineColors = ref(global.sysPreDefColors)

const layerData = ref([
    {
        "order": 1,
        "name": "默认",
        "display": true,
        "lock": false,
        "color": "#ffffff",
        "linewidth": 1,
        "linemode": 'solid'
    },
    {
        "order": 2,
        "name": "标注",
        "display": true,
        "lock": false,
        "color": "#ffffff",
        "linewidth": 1,
        "linemode": 'solid'
    }
])

const initData = () => {
    let ret = window.mainctl.m_pLayerINTF.getAllLayerData();
    curentLayer.value = ret.curentName;
    let list = ret.list;
    layerData.value = [];
    list.forEach(t => {
        layerData.value.push(t);
    });
    curentLayerLabel.value = "当前图层：" + ret.curentName;
}

const onSelColor = (index,row) =>{
    console.log("onSelColor:");
    window.mainctl.m_pLayerINTF.setLayerShow(curentLayer.value,row.display);
}

const onCheckVisible = (index,row) =>{
    console.log("visibleChecked:");
    window.mainctl.m_pLayerINTF.setLayerShow(curentLayer.value,row.display);
}

const onCheckLock = (index,row) =>{
    console.log("lockChecked:");
    window.mainctl.m_pLayerINTF.lockLayer(curentLayer.value,row.lock);
}

const handleCurrentChange = (row) => {
    console.log("handleCurrentChange");
    if (row) {
        console.log(row);
        currentRow.value = row;
        curentLayer.value = row.name;
        console.log(curentLayer.value);
    }
}
const onNewLayer = () => {
    let list = layerData.value;
    let count = list.length;
    let newName = "layer-" + count;
    let newLayerInfo = {
        "order": count + 1,
        "name": newName,
        "display": true,
        "lock": false,
        "color": "#ffffff",
        "linewidth": 1,
        "linemode": 'solid'
    }
    layerData.value.push(newLayerInfo);
    window.mainctl.m_pLayerINTF.newLayer(newLayerInfo);
}

const onSetCurent = () => {
    window.mainctl.m_pLayerINTF.setCurent(curentLayer.value);
    curentLayerLabel.value = "当前图层：" + curentLayer.value;
}

const onDelLayer = () => {
    window.mainctl.m_pLayerINTF.delLayer(curentLayer.value);
}

const onSetAllDisplay = () => {
    window.mainctl.m_pLayerINTF.setAllDisplay();
}

const onSelAllGraphInLayer = () => {
    window.mainctl.m_pLayerINTF.selAllGraphInLayer(curentLayer.value);
}

const onSetLayerOrder = (kind) => {
    window.mainctl.m_pLayerINTF.setLayerOrder(curentLayer.value, kind);
}

defineExpose({
    visible,
    initData
});

</script>


<style scoped>
::v-deep .el-table th {
background-color: rgba(137, 42, 42, 0.5);
border: none !important;
color: #ffffff;
}

::v-deep .el-table th,
.tableMap ::v-deep .el-table tr,
.tableMap ::v-deep .el-table td {
  background-color: rgba(137, 42, 42, 0.1) !important;
  color: #ffffff;
}
.button{
  position: relative;
  height: 33px;
  width: 100px;
  background: rgba(35, 19, 252, 0.425);
  border-radius: 10px;
  box-shadow: none;
  color: white;
  margin-left: 40px;
  margin-right: 10px;
}
</style>